<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page language="java"
	import="java.util.HashMap,java.lang.*,java.sql.Date,java.util.*,java.text.SimpleDateFormat"%>
<%@ page
	import="sg.edu.nus.iss.phoenix.schedule.entity.Schedule,sg.edu.nus.iss.phoenix.schedule.entity.ProgramSlot"%>

<html>
<head>
<link href="<c:url value='/css/main.css'/>" rel="stylesheet"
	type="text/css" />
<script type="text/javascript" src="../script/jquery.js"></script>
<script language="javascript" type="text/javascript"
	src="../script/datetimepicker.js"></script>
<fmt:setBundle basename="ApplicationResources" />
<title><fmt:message key="title.crudschedule" /></title>
<style type="text/css">
td.newSchedule:hover {
	background-color: #806517;
}

td.existingSchedule:hover {
	background-color: #806517;
}

td.newSchedule {
	background-color: #E3E4FA;
	vertical-align: center;
	align: middle;
}

td.existingSchedule {
	background-color: #A0C544;
}

td.selectedSchedule {
	background-color: #FBB917;
}

th.horizontalHeader {
	background-color: #B93B8F;
	height: 30px;
}

td.verticalHeader {
	background-color: #747170;
	height: 30px;
}
</style>
<script type="text/javascript" src="../script/jquery.js"></script>
<script>
	
	
	function programslotObj()
	{
		var name;
		var duration;
		var programDate;
		var startTime;
		var presenterName;
		var ProducerName;
	}
	
	jQuery(document).ready(function() {	

		var pos = $("#tbtimeTableValues").width(); // don't need to use 'px'
		   jQuery("#timeTable").css('width', pos);
		
		
		$('#prgmslot').live('click', function(){
			$('#copyScheduleDiv').empty();
			$('#errorDiv').empty();
			var currDate = new Date();
			var datestr =  $(this).attr("date").split('-');
			var prgstarttime = $(this).parents('tr:first').find('td:first').text().substring(0, 5) + ":00";
			var srttime = prgstarttime.split(":");
			var toDate = new Date(datestr[0], datestr[1]-1,  datestr[2],srttime[0],srttime[1],srttime[2]);
			if(toDate < currDate ){
					document.getElementById("copyErrorMsg").setAttribute('style', 'color:red');
					document.getElementById("copyErrorMsg").innerHTML = "Only future schedule can be edited!";
			}
			else{
				$('#selectDateDiv').empty();	
			document.getElementById("copyErrorMsg").innerHTML = "";			
			var programslotObj = new Object();
			var datestr =  $(this).attr("date").split('-');
			var newfrt = datestr[2] + '-'+ datestr[1] + '-'+ datestr[0];
			var prgstarttime = $(this).parents('tr:first').find('td:first').text().substring(0, 5) + ":00";			
			
			programslotObj.id = $(this).attr("slotId");
			programslotObj.name = $(this).attr("name");
			programslotObj.duration = $(this).attr("duration");
			programslotObj.programDate = newfrt;
			programslotObj.startTime = prgstarttime;
			programslotObj.presenterName = $(this).attr("presenterName");
			programslotObj.producerName = $(this).attr("producerName");
			programslotObj.presenterId = $(this).attr("presenterId");
			programslotObj.producerId = $(this).attr("producerId");
			$('#scheduleHeaderDiv').empty();
			if(programslotObj.id != 0)
			{
			
			$('#scheduleHeaderDiv').append('<h1>Edit/Delete Program Slot</h1>');
			}
			else
			{
				$('#scheduleHeaderDiv').append('<h1>Create Program Slot</h1>');	
			}

			$('html').animate({scrollTop:0}, 'slow');
			$('body').animate({scrollTop:0}, 'slow');
			$('#scheduleDiv').load('<%= request.getContextPath() %>/pages/tilepages/editschedule.jsp', function() {
				
				
				$('#programid').val(programslotObj.id);  
				 
				  $('#date').val(programslotObj.programDate);
				  $('#time').val(programslotObj.startTime);
				  
				  if(programslotObj.id != 0)
				{
				  $('#programName').val(programslotObj.name);
				  $('#duration').val(programslotObj.duration);
				 
				  $('#presenterid').val(programslotObj.presenterId);
				  $('#producerid').val(programslotObj.producerId);
				  $('#presentername').val(programslotObj.presenterName);
				  $('#producername').val(programslotObj.producerName); 
				}
				  
				  if(programslotObj.id != 0)
					{
					
						$('#scheduleDiv').append('<form action="${pageContext.request.contextPath}/ScheduleController/deleteSchedule">'
						+ '<input type="hidden" id="deleteid" name="deleteid" value="'+programslotObj.id +'" />'
						+ '<table><tr><td><input type="submit" id="deleteaction" value="Delete">'
						+ '</td></tr></table></form>');
						
					}
					
				});
	}});
		
		$('#cpyschedule').click(function(){addCopyScheduleEvent();});
	});
	
	function addCopyScheduleEvent(){
		$('#copyScheduleDiv').append();
		$('#selectDateDiv').empty();
		$('#copyScheduleDiv').load('<%= request.getContextPath() %>/pages/tilepages/copySchedule.jsp',  function(){
			//alert("The last 25 entries in the feed have been loaded");
			});
		}

</script>

</head>
<body>
 <div style="color:red" id="errorDiv" >${errorMessage}
		</div>
<div id="scheduleHeaderDiv">
		</div>
    <div id="scheduleDiv">
		</div>
	<form
		action="${pageContext.request.contextPath}/controller/loadschedule"
		method=post>
		<div id="selectDateDiv">
			<h1>
				<fmt:message key="label.crudschedule" />
			</h1>

			<table class="borderAll">

				<tr>
					<td><input id="selecteddate" name="selecteddate" type="text"
						size="25" value="<%=request.getSession().getAttribute("date") %>"
						readonly="readonly"> <a
						href="javascript:NewCal('selecteddate','ddmmyyyy')"> <img
							src="../img/cal.gif" width="16" height="16" border="0"
							alt="Pick a date">
					</a></td>

					<td><input type="button" id="cpyschedule" name="cpyschedule"
						value="copyschedule" /></td>

				</tr>

				<tr>
					<td colspan="2" align="left"><input type="submit"
						value="Load Schedule">
				</tr>
			</table>
			<br />
		</div>
		<div id="copyErrorMsg"></div>
		<div id="copyScheduleDiv"></div>
		<div id="divTimeTable">
			<table id="timeTable" class="borderAll">
				<thead>
					<tr>
						<th class="horizontalHeader">Time/Date</th>
						<%
							ArrayList<Date> keys = new ArrayList<Date>();
							Map<Date, Schedule> weeklySchedule = (Map<Date, Schedule>) session
									.getAttribute("weeklySchedule");
							for (Date key : weeklySchedule.keySet()) {
								keys.add(key);
								SimpleDateFormat  simpleDateformat = new SimpleDateFormat("EEEE"); 
						%>
						<th class="horizontalHeader"><%=key%><br /><%=simpleDateformat.format(key)%></th>
						<%
							}
						%>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
				</tfoot>
				<tbody>
					<%
						long rowspan0 = 0;
						long rowspan1 = 0;
						long rowspan2 = 0;
						long rowspan3 = 0;
						long rowspan4 = 0;
						long rowspan5 = 0;
						long rowspan6 = 0;
						HashMap<Integer, String> allTimes = null;
						allTimes = (HashMap<Integer, String>) session
								.getAttribute("allTimeSlots");
						for (int j = 1; j < allTimes.size() + 1; j++) {
					%>
					<tr>
						<%
							String time = allTimes.get(Integer.valueOf(j));
						%>
						<td class="verticalHeader"><%=time%></td>
						<%
							ProgramSlot ps = null;
								String cssName = "newSchedule";
								if (rowspan0 < 1) {
									ps = weeklySchedule.get(keys.get(0))
											.getProgramSlotByTimeSlot(time);
									rowspan0 = ps.getDurationInHours();
									if (ps.getProgramSlotId() != 0) {
										cssName = "existingSchedule";
									}
						%>
						<td id="prgmslot" style="height: 40px" <%if (rowspan0 > 0) {%>
							rowspan="<%=rowspan0%>" <%}%> class="<%=cssName%>"
							slotId="<%=ps.getProgramSlotId()%>"
							name="<%=ps.getProgramName()%>" date="<%=keys.get(0)%>"
							duration="<%=ps.getDuration()%>"
							durationInHrs="<%=ps.getDurationInHours()%>"
							presenterId="<%=ps.getPresenter().getId()%>"
							presenterName="<%=ps.getPresenter().getName()%>"
							producerId="<%=ps.getProducer().getId()%>"
							producerName="<%=ps.getProducer().getName()%>"><span><%=ps.getProgramName()%></span><br />
							<span><%=ps.getPresenter().getName()%></span></td>
						<%
							rowspan0--;
								} else {
									rowspan0--;
								}
						%>

						<%
							ps = null;
								cssName = "newSchedule";
								if (rowspan1 < 1) {
									ps = weeklySchedule.get(keys.get(1))
											.getProgramSlotByTimeSlot(time);
									rowspan1 = ps.getDurationInHours();
									if (ps.getProgramSlotId() != 0) {
										cssName = "existingSchedule";
									}
						%>
						<td id="prgmslot" style="height: 40px" <%if (rowspan1 > 0) {%>
							rowspan="<%=rowspan1%>" <%}%> class="<%=cssName%>"
							slotId="<%=ps.getProgramSlotId()%>"
							name="<%=ps.getProgramName()%>" date="<%=keys.get(1)%>"
							duration="<%=ps.getDuration()%>"
							durationInHrs="<%=ps.getDurationInHours()%>"
							presenterId="<%=ps.getPresenter().getId()%>"
							presenterName="<%=ps.getPresenter().getName()%>"
							producerId="<%=ps.getProducer().getId()%>"
							producerName="<%=ps.getProducer().getName()%>"><span><%=ps.getProgramName()%></span><br />
							<span><%=ps.getPresenter().getName()%></span></td>
						<%
							rowspan1--;
								} else {
									rowspan1--;
								}
						%>

						<%
							ps = null;
								cssName = "newSchedule";
								if (rowspan2 < 1) {
									ps = weeklySchedule.get(keys.get(2))
											.getProgramSlotByTimeSlot(time);
									rowspan2 = ps.getDurationInHours();
									if (ps.getProgramSlotId() != 0) {
										cssName = "existingSchedule";
									}
						%>
						<td id="prgmslot" style="height: 40px" <%if (rowspan2 > 0) {%>
							rowspan="<%=rowspan2%>" <%}%> class="<%=cssName%>"
							slotId="<%=ps.getProgramSlotId()%>"
							name="<%=ps.getProgramName()%>" date="<%=keys.get(2)%>"
							duration="<%=ps.getDuration()%>"
							durationInHrs="<%=ps.getDurationInHours()%>"
							presenterId="<%=ps.getPresenter().getId()%>"
							presenterName="<%=ps.getPresenter().getName()%>"
							producerId="<%=ps.getProducer().getId()%>"
							producerName="<%=ps.getProducer().getName()%>"><span><%=ps.getProgramName()%></span><br />
							<span><%=ps.getPresenter().getName()%></span></td>
						<%
							rowspan2--;
								} else {
									rowspan2--;
								}
						%>

						<%
							ps = null;
								cssName = "newSchedule";
								if (rowspan3 < 1) {
									ps = weeklySchedule.get(keys.get(3))
											.getProgramSlotByTimeSlot(time);
									rowspan3 = ps.getDurationInHours();
									if (ps.getProgramSlotId() != 0) {
										cssName = "existingSchedule";
									}
						%>
						<td id="prgmslot" style="height: 40px" <%if (rowspan3 > 0) {%>
							rowspan="<%=rowspan3%>" <%}%> class="<%=cssName%>"
							slotId="<%=ps.getProgramSlotId()%>"
							name="<%=ps.getProgramName()%>" date="<%=keys.get(3)%>"
							duration="<%=ps.getDuration()%>"
							durationInHrs="<%=ps.getDurationInHours()%>"
							presenterId="<%=ps.getPresenter().getId()%>"
							presenterName="<%=ps.getPresenter().getName()%>"
							producerId="<%=ps.getProducer().getId()%>"
							producerName="<%=ps.getProducer().getName()%>"><span><%=ps.getProgramName()%></span><br />
							<span><%=ps.getPresenter().getName()%></span></td>
						<%
							rowspan3--;
								} else {
									rowspan3--;
								}
						%>

						<%
							ps = null;
								cssName = "newSchedule";
								if (rowspan4 < 1) {
									ps = weeklySchedule.get(keys.get(4))
											.getProgramSlotByTimeSlot(time);
									rowspan4 = ps.getDurationInHours();
									if (ps.getProgramSlotId() != 0) {
										cssName = "existingSchedule";
									}
						%>
						<td id="prgmslot" style="height: 40px" <%if (rowspan4 > 0) {%>
							rowspan="<%=rowspan4%>" <%}%> class="<%=cssName%>"
							slotId="<%=ps.getProgramSlotId()%>"
							name="<%=ps.getProgramName()%>" date="<%=keys.get(4)%>"
							duration="<%=ps.getDuration()%>"
							durationInHrs="<%=ps.getDurationInHours()%>"
							presenterId="<%=ps.getPresenter().getId()%>"
							presenterName="<%=ps.getPresenter().getName()%>"
							producerId="<%=ps.getProducer().getId()%>"
							producerName="<%=ps.getProducer().getName()%>"><span><%=ps.getProgramName()%></span><br />
							<span><%=ps.getPresenter().getName()%></span></td>
						<%
							rowspan4--;
								} else {
									rowspan4--;
								}
						%>

						<%
							ps = null;
								cssName = "newSchedule";
								if (rowspan5 < 1) {
									ps = weeklySchedule.get(keys.get(5))
											.getProgramSlotByTimeSlot(time);
									rowspan5 = ps.getDurationInHours();
									if (ps.getProgramSlotId() != 0) {
										cssName = "existingSchedule";
									}
						%>
						<td id="prgmslot" style="height: 40px" <%if (rowspan5 > 0) {%>
							rowspan="<%=rowspan5%>" <%}%> class="<%=cssName%>"
							slotId="<%=ps.getProgramSlotId()%>"
							name="<%=ps.getProgramName()%>" date="<%=keys.get(5)%>"
							duration="<%=ps.getDuration()%>"
							durationInHrs="<%=ps.getDurationInHours()%>"
							presenterId="<%=ps.getPresenter().getId()%>"
							presenterName="<%=ps.getPresenter().getName()%>"
							producerId="<%=ps.getProducer().getId()%>"
							producerName="<%=ps.getProducer().getName()%>"><span><%=ps.getProgramName()%></span><br />
							<span><%=ps.getPresenter().getName()%></span></td>
						<%
							rowspan5--;
								} else {
									rowspan5--;
								}
						%>

						<%
							ps = null;
								cssName = "newSchedule";
								if (rowspan6 < 1) {
									ps = weeklySchedule.get(keys.get(6))
											.getProgramSlotByTimeSlot(time);
									rowspan6 = ps.getDurationInHours();
									if (ps.getProgramSlotId() != 0) {
										cssName = "existingSchedule";
									}
						%>
						<td id="prgmslot" style="height: 40px" <%if (rowspan6 > 0) {%>
							rowspan="<%=rowspan6%>" <%}%> class="<%=cssName%>"
							slotId="<%=ps.getProgramSlotId()%>"
							name="<%=ps.getProgramName()%>" date="<%=keys.get(6)%>"
							duration="<%=ps.getDuration()%>"
							durationInHrs="<%=ps.getDurationInHours()%>"
							presenterId="<%=ps.getPresenter().getId()%>"
							presenterName="<%=ps.getPresenter().getName()%>"
							producerId="<%=ps.getProducer().getId()%>"
							producerName="<%=ps.getProducer().getName()%>"><span><%=ps.getProgramName()%></span><br />
							<span><%=ps.getPresenter().getName()%></span></td>
						<%
							rowspan6--;
								} else {
									rowspan6--;
								}
						%>

					</tr>
					<%
						}
					%>
				</tbody>
			</table>
		</div>
</body>
</html>